<script setup name="home">
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { computed, ref } from 'vue';

const store = useStore();
const route = useRoute();
const router = useRouter();
// 用户名字
const userName = localStorage.getItem('account');
// 购物车
// const shopping = computed(() => store.state.shopping);
// 吸顶
const fixed = ref(null);
// 下拉框
const index = ref(-1);
store.dispatch('homepage/updateHeader');
const headerList = computed(() => store.state.homepage.headerList);
// 请先登录
function onLogin() {
  router.push('/login');
}
// 退出登录
function outLogin() {
  router.push('/login');
}
// 吸顶
const onScroll = (e) => {
  fixed.value = e.target.scrollTop > 70;
};
// 切换路由
function onChangeRouter(id) {
  router.push({
    name: 'livinghome',
    params: {
      id,
    },
  });
}
// 切换二级路由
function onJumpSubCategory(id) {
  router.push({
    name: '二级分类',
    params: {
      id,
    },
  });
}
// 回到首页
function onGoHome() {
  router.push('/');
}

// 定时器
let timer = null;
function onMouseEnter(i) {
  clearTimeout(timer);
  index.value = i;
}

function onMouseLeave() {
  timer = setTimeout(() => {
    index.value = -1;
  }, 500);
}
// 移入下拉框
function onSubNavMouseEnter() {
  clearTimeout(timer);
}
// 移出下拉框
function onSubNavMouseLeave() {
  index.value = -1;
}


</script>

<template>
  <div
    class="mian"
    ref="main"
    @scroll="onScroll($event)"
  >
    <!-- 头部 -->
    <div class="header">
      <div class="header-nav">
        <span @click="onLogin">{{ userName ? userName : '请先登录' }}</span>
        <span v-show="!userName">免费注册</span>
        <span
          v-show="userName"
          @click="outLogin"
        >
          退出登录
        </span>
        <span>我的订单</span>
        <span>会员中心</span>
        <span>帮助中心</span>
        <span>关于我们</span>
        <span>
          <el-icon style="vertical-align: -15%"><Iphone /></el-icon>
          手机版


        </span>
      </div>
    </div>

    <!-- 导航 -->
    <div class="nav-contariner">
      <div class="nav">
        <div>
          <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" />
        </div>

        <div class="commodity">
          <span
            class="nav-item"
            @click="onGoHome"
          >
            <span>首页</span>
          </span>

          <span
            v-for="(item, i) in headerList"
            :key="item.id"
            class="nav-item"
            @click="onChangeRouter(item.id)"
          >
            <span
              @mouseenter="onMouseEnter(i)"
              @mouseleave="onMouseLeave(i)"
            >
              {{ item.name }}
            </span>
          </span>
        </div>

        <div class="input-search">
          <div class="search">
            <el-input
              placeholder="Please input"
              class="input-with-select"
            >
              <template #prepend>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
          <el-dropdown
          >
            <div class="shoping">
              <el-badge :value="200000" :max="999999" class="item">
                <el-icon><ShoppingCart /></el-icon>
              </el-badge>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <div>
                  <div class="down-dropdown">
                    111111111111111
                  </div>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="nav-hide-container">
        <div
          class="nav-hide"
          :class="{
            hide: index !== -1
          }"
          @mouseenter="onSubNavMouseEnter"
          @mouseleave="onSubNavMouseLeave"
        >
          <div
            v-for="item in headerList[index]?.children"
            :key="item.id"
            @click="onJumpSubCategory(item.id)"
          >
            <div>
              <img :src="item.picture">
            </div>
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 吸顶 -->
    <div
      :class="fixed ? 'container fixed' : 'container'"
      v-show="fixed"
    >
      <div class="affix-container">
        <el-affix>
          <div class="affix">
            <div>
              <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" />
            </div>
            <div class="affix-home">
              <span class="affix-item">
                <span
                  @click="onGoHome"
                >
                  首页
                </span>
              </span>

              <span
                v-for="item in headerList"
                :key="item.id"
                class="affix-item"
                @click="onChangeRouter(item.id)"
              >
                <span>{{ item.name }}</span>
              </span>
            </div>
            <div class="top">
              <div class="top-item">
                <span>品牌</span>
              </div>
              <div>
                <span>专项</span>
              </div>

            </div>
          </div>
        </el-affix>
      </div>
      <!-- 弹窗 -->
      <!-- <div class="pop-up">

      </div> -->

    </div>

    <div class="view-router">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
      <!-- <router-view></router-view> -->
    </div>
  </div>

</template>

<style lang="scss" scoped>
  // 头部颜色
  $a:#333333;
  $b:#cdcdcd;
  // 主题颜色
  $c:#27ba9b;
  // // 主页背景色
  $d:#f5f5f5;


  $black: black;
  $white: white;

  .mian {
    box-sizing: border-box;
    height: 100vh;
    overflow: auto;
    background-color: $d;

  .header {
    height: 53px;
    background-color: $a;
    display: flex;
    justify-content: right;
    align-items: center;

    .header-nav {
      margin: 0 130px;

      span {
        position: relative;
        display: inline-block;
        color: $b;
        font-size: 14px;
        padding: 0 12px;
        text-decoration: none;
      }


      span:hover {
        color: $c;
        cursor: pointer;
      }

      span::after {
        position: absolute;
        content: '';
        display: inline-block;
        width: .5px;
        height: 12px;
        background-color: $b;
        right: 0;
        top: 55%;
        transform: translateY(-50%);
      }

      // 选中最后一个
      span:last-child::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
      }
    }


  }

  .nav-contariner {
    position: relative;
    .nav {
      display: flex;
      align-items: center;
      height: 132px;
      box-sizing: border-box;
      background-color: $white;
      padding: 0 130px;

      img {
        display: inline-block;
        width: 200px;
        cursor: pointer;
        background-size: cover;
      }

      .commodity {
        position: relative;
        flex: 1;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        .nav-item {
          // margin: 0 18px;
          text-align: center;

          span:hover {
            cursor: pointer;
            border-bottom: 1px solid $c;
            color: $c;
            padding: 4px 0;
          }

        }

      }

      .input-search {
        display: flex;
        align-items: center;

        .search {
          border-bottom: 1px solid $b;
        }
        .down-dropdown {
          width: 300px;
          height: 300px;
          background-color: red;
        }

        .shoping {
          cursor: pointer;
        }

        ::v-deep(.el-input-group__prepend) {
          padding: 0;
          box-shadow: none;
          background-color: $white;
        }

        ::v-deep(.el-input__wrapper) {
          box-shadow: none;
        }
      }

    }

    .nav-hide-container {
      position: absolute;
      width: 100%;
      // overflow: hidden;
      top: 80%;
      z-index: 10;

      .nav-hide{
        margin: 0 130px;
        width: 70.3%;
        height: 0px;
        display: flex;
        padding: 0 70px;
        transition: height .3s;
        background-color: $white;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);

        &>div {
          width: 90px;
          height: 90px;

          img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          div {
            text-align: center;
          }

        }
        &.hide {
          height: 132px;
        }

        &:hover {
          cursor: pointer;
        }

      }
    }

  }


  .container {
    .affix-container {
      padding: 0 160px;

        // 吸顶
      .affix {
        height: 80px;
        display: flex;
        align-items: center;

        img {
          display: inline-block;
          width: 150px;
          cursor: pointer;
          background-size: cover;
        }

        .affix-home {
          flex: 1;
          display: grid;
          grid-template-columns: repeat(10, 1fr);
          text-align: center;

          .affix-item {

            span:hover {
              cursor: pointer;
              border-bottom: 1px solid $c;
              color: $c;
              padding: 4px 0;
            }

          }
        }
      }

      // 吸顶
      .top {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        // 间隔
        grid-column-gap: 20px;

        .top-item {
          position: relative;
            cursor: pointer;
            padding-left: 17px;

          &::after {
            position: absolute;
            content: '';
            display: inline-block;
            width: .5px;
            height: 15px;
            background-color: $c;
            left: 0;
            top: 55%;
            transform: translateY(-50%);
          }
        }

        span:hover {
            cursor: pointer;
            border-bottom: 1px solid $c;
            padding-bottom: 4px;
            color: $c;
          }

      }


    }

    .pop-up {
        height: 300px;
        background-color: #27ba9b;
        margin: 0 130px;
      }
  }

  .fixed {
    position: fixed;
    top: 0;
    background-color: $white;
    width: 100%;
    z-index: 9999;
    // min-width: 100%;
  }


  // .slideshow {
  //   height: 500px;
  //   padding: 0 130px;
  // }
}
</style>
